import { INavBarItem } from 'interface/INavBarItem';
import * as React from 'react';
import { RouteComponentProps, withRouter } from 'react-router';
import NavBarItem from './NavBarItem';
import Logout from "../Logout";
export interface INavBarProps extends RouteComponentProps {
    navList: INavBarItem[]
}

export interface INavBarState {
}

class NavBar extends React.Component<INavBarProps, INavBarState> {
    constructor(props: INavBarProps) {
        super(props);

        this.state = {
        }
    }


    public render() {
        return (
            <div id='navbar' className="pt-5" role="group" aria-label="Basic outlined example">
                <div style={{height:"50px"}} className={"d-flex flex-row   justify-content-between bg-primary  mb-5"}>
                    <ul className={"nav   nav-pills flex-grow-1 d-flex justify-content-start h-100"}>{this.props.navList.map(item => <NavBarItem key={item.id} item={item} />)}</ul>
                    <Logout />
                </div>
            </div>
        );
    }
}

export default withRouter(NavBar)
